<template>
  <el-row class="category-list">
    <el-col>
      <el-button style="width: 100%" @click="selectAll" type="primary" :disabled="allSelected">全部目录</el-button>
    </el-col>
    <el-col v-for="c in categories" :key="c.id">
      <el-button
        style="width: 100%"
        @click="categorySelected(c.id)"
        type="info"
        plain
        :disabled="selected == c.id"
      >
        <i :class="'fa fa-folder-open' + (selected == c.id ? '-o' : '')"></i> {{c.name}}
      </el-button>
    </el-col>
  </el-row>
</template>

<script>
import { ref } from 'vue'
export default {
  props: {
    categories: { type: Array, default: [] },
  },
  setup(props, context) {
    const selected = ref(-1)
    const allSelected = ref(true)
    const categorySelected = (cid) => {
      selected.value = cid
      context.emit("categorySelected", cid);
      allSelected.value = false
    };
    const selectAll = () => {
      context.emit("categorySelectAll")
      allSelected.value = true
      selected.value = -1
    }
    return { categorySelected, selectAll, selected, allSelected };
  },
};
</script>

<style>
.category-list {
  position: fixed;
  padding: 14px 2px;
  left: 10;
  top: 30%;
  /* box-shadow: 0 0 20px 1px rgb(0 85 255 / 10%); */
  background-color: rgba(0, 0, 0, 0);
  width: 10em;
}
</style>